;
(function(axios){
	const template = `
<div>
	<router-link class="btn btn-success" to="/crud/new">添加学生</router-link>
	<div class="table-responsive">
	    <table class="table table-striped">
	        <thead>
	            <tr>
	                <th>#</th>
	                <th>姓名</th>
	                <th>年龄</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in list" :key="item.id">
	                <td>{{ item.id }}</td>
	                <td>{{ item.name }}</td>
	                <td>{{ item.age }}</td>
	                <td><a href="/students/edit?id=2" class="btn">编辑</a><a onclick="return confirm('确定要删除吗？')" href="/students/delete?id=2" class="btn">删除</a></td>
	            </tr>
	        </tbody>
	    </table>
	</div>
</div
`
	window.CrudList  = {
		template,
		data(){
			return {
				list : []
			}
		},
		created(){
			this.loadList()
		},
		methods : {
			loadList(){
				axios.get('http://localhost:3000/list').then(res => this.list = res.data)
			}
		}
	}
})(axios)